<template>
    <div class="tongjitable-wrap" v-loading="outLoading">
        <a-page-header style="padding: 8px 2px" @back="handleBack" v-if="detailData.pmpProductDetailDTO">
            <template #subTitle>
                <flexbox justify="space-between">
                    <flexbox>
                        <span style="color: #000; font-size: 20px; font-weight: bold">
                            {{ detailData?.pmpProductDetailDTO?.systemName }}
                        </span>
                        <a-tag color="cyan" style="margin-left: 12px">{{
                            detailData?.pmpProductDetailDTO.catalogType === '1' ? '产品' : '子产品'
                        }}</a-tag>
                    </flexbox>
                </flexbox>
            </template>
        </a-page-header>
        <div class="cont">
            <CustomTable
                autoResize
                rowKey="id"
                size="small"
                :loading="loading"
                :columns="tableColumns"
                :data-source="list"
                :pagination="paginationConfig"
                @change="handleTableChange"
            >
                <template #index="{ index }">
                    {{ index + 1 }}
                </template>
                <!-- 技术中台 -->
                <template #businessCreateTime="{ text }">
                    {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
                </template>
                <template #businessFirstReviewTime="{ text }">
                    {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
                </template>
                <template #businessAcceptTime="{ text }">
                    {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
                </template>
                <template #versionConfirmTime="{ text }">
                    {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
                </template>
                <template #versionRanddRealStartTime="{ text }">
                    {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
                </template>
                <template #versionRanddRealEndTime="{ text }">
                    {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
                </template>
                <template #versionTestRealStartTime="{ text }">
                    {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
                </template>
                <template #versionTestRealEndTime="{ text }">
                    {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
                </template>
                <template #versionOnlineRealTime="{ text }">
                    {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
                </template>
                <!-- jira -->
                <template #submitTime="{ text }">
                    {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
                </template>
                <template #acceptTime="{ text }">
                    {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
                </template>
                <template #confirmTime="{ text }">
                    {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
                </template>
                <template #randdStartTime="{ text }">
                    {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
                </template>
                <template #randdEndTime="{ text }">
                    {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
                </template>
                <template #testStartTime="{ text }">
                    {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
                </template>
                <template #testEndTime="{ text }">
                    {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
                </template>
                <template #onlineTime="{ text }">
                    {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
                </template>
                <template #action="{ record }">
                    <a @click="showDetail(record.id)">详情</a>
                </template>
            </CustomTable>
        </div>
    </div>
</template>

<script lang="ts">
import { CustomTable } from '@/components';
import api from '@/api';
import { useRouterApi } from '@/hooks/common/useRouterApi';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        CustomTable
    },
    setup(props) {
        const { route, router, handleBack } = useRouterApi({
            backQuery: {
                path: 'energyManage/beijixing/detail'
            }
        });
        const state = reactive<any>({
            list: [],
            idArr: [],
            detailData: {},
            paginationConfig: {
                total: 0,
                pageSize: 20, // 每页中显示10条数据
                showSizeChanger: true,
                pageSizeOptions: ['5', '10', '15', '20'], // 每页中显示的数据
                showTotal: (total: number) => `共有 ${total} 条数据`, // 分页中显示总的数据
                current: 1
            },
            loading: false,
            outLoading: false
        });

        const tableColumns = [
            {
                title: '序号',
                dataIndex: 'index',
                slots: { customRender: 'index' }
            },
            {
                title: '关联业务需求',
                width: 300,
                dataIndex: 'businessName'
            },
            {
                title: '产品需求名称',
                width: 300,
                dataIndex: 'productName'
            },
            {
                title: '提出时间',
                dataIndex: 'businessCreateTime',
                slots: { customRender: 'businessCreateTime' }
            },
            {
                title: '初审时间',
                dataIndex: 'businessFirstReviewTime',
                slots: { customRender: 'businessFirstReviewTime' }
            },
            {
                title: '受理时间',
                dataIndex: 'businessAcceptTime',
                slots: { customRender: 'businessAcceptTime' }
            },
            {
                title: '方案确定',
                dataIndex: 'versionConfirmTime',
                slots: { customRender: 'versionConfirmTime' }
            },
            {
                title: '研发实际开始',
                dataIndex: 'versionRanddRealStartTime',
                slots: { customRender: 'versionRanddRealStartTime' }
            },
            {
                title: '研发实际结束',
                dataIndex: 'versionRanddRealEndTime',
                slots: { customRender: 'versionRanddRealEndTime' }
            },
            {
                title: '测试实际开始',
                dataIndex: 'versionTestRealStartTime',
                slots: { customRender: 'versionTestRealStartTime' }
            },
            {
                title: '测试实际结束',
                dataIndex: 'versionTestRealEndTime',
                slots: { customRender: 'versionTestRealEndTime' }
            },
            {
                title: '实际上线',
                dataIndex: 'versionOnlineRealTime',
                slots: { customRender: 'versionOnlineRealTime' }
            }
        ];
        const getList = async () => {
            state.loading = true;
            const { current, pageSize } = state.paginationConfig;
            const { success, moule } = await api.portalControlModel.findByRequireIds(state.idArr.slice((current - 1) * pageSize, current * pageSize));
            if (success) {
                state.list = [...moule];
            }
            state.loading = false;
        };
        const handleTableChange = (val) => {
            state.paginationConfig = val;
            getList();
        };
        const showDetail = (id) => {
            const path = '/energyManage/jiraTrack/detail';
            const query = { id };
            router.push({
                path,
                query
            });
        };
        const getDetailData = async () => {
            state.outLoading = true;
            const { isOutsideSystem, systemType, key, ...query } = route.query;
            const { success, moule } = await api.portalControlModel.getPolarisIndexInfo(query);
            if (success) {
                state.detailData = { ...moule };
                const field: any = route.query['key'];
                if (moule[field] && moule[field].length) {
                    state.idArr = [...moule[field]];
                    state.paginationConfig.total = moule[field].length;
                    getList();
                }
            }
            state.outLoading = false;
        };
        getDetailData();
        return {
            tableColumns,
            ...toRefs(state),
            handleTableChange,
            showDetail,
            handleBack
        };
    }
});
</script>

<style scoped lang="less">
.tongjitable-wrap {
    background: #fff;
    padding: 12px;
}
</style>